Skip to main content

How to set up and use Extract critical CSS ?

Hello there, dear user! We're thrilled to introduce you to a new feature of our SEO Suite app, called 'Extract Critical CSS'. This handy tool helps extract CSS files from your website, reducing their size and consequently enhancing your website's loading speed. This can significantly improve your website's ranking on search engines.

In this guide, we'll walk you through how to configure and use the 'Extract Critical CSS' feature. Please follow the steps below:

Introduction​

Before we dive into the steps, let's understand what 'Extract Critical CSS' does. It extracts the CSS files from your website, reduces their size, and improves your website's loading speed. This can significantly boost your website's ranking on search engines.

Now, let's get started!

Step 1: Enabling the Feature​

Firstly, please navigate to 'Speed up' > 'Extract critical CSS'. Once you're there, kindly click on 'Enable'.

Enable Feature

Step 2: Generating Critical CSS​

Next, please click on 'Generate'. You'll see a list of pages (Home page, Collection page, Product pages). Kindly tick the pages where you want to apply the 'Extract critical CSS' feature. After selecting, please click on 'Generate'.

Generate CSS

Generate CSS

Step 3: Refreshing to Complete the Process​

After generating, please click on the 'Refresh' button to complete the critical CSS generation.

Refresh

Once the generation is successful, the results will be displayed in the 'Analysis' and 'Total saved size' sections.

Analysis

In case there are any changes to your website, please click on 'Regenerate' to optimize your website.

Regenerate

And that's it! You've successfully configured and used the 'Extract Critical CSS' feature. We hope this guide was helpful. If you have any questions or need further assistance, please don't hesitate to reach out. Happy optimizing!